<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue2.js"></script>
</head>
<body>

<!--
        v-model  一般使用在form表单组件中   input   select   textarea
        p   div
-->
<div id="app">
    <from>
        <p><input type="text" placeholder="用户名" v-model:value="usr.username"></p>
        <p><input type="password" placeholder="密码" v-model="usr.password"></p>
        <p>
            <button @click="login">提交</button>
        </p>
    </from>

    <p>
        <button @click="edit">编辑</button>
    </p>
</div>


<script>
    let vm = new Vue({
        el: '#app',
        data: {
            username: '',
            password: '',
            usr:{
                username:'',
                password:''
            }
        },
        methods: {
            login() {
                // console.log("username=" + this.username)
                // console.log("password=" + this.password)
                // let usr = {username:this.username,password:this.password}

                console.log(JSON.stringify(this.usr))
            },
            edit() {
                //  TODO 发送异步请求
                let usr = {
                    username:'jack',
                    password:"123456"
                }
               this.usr = usr
            }
        }
    })
</script>
</body>
</html>